<template>
  <div :style="getMenuStyle" :class="prefixCls">
    <LayoutMenu />
  </div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import { SIDE_BAR_MINI_WIDTH } from '@/enums/app-enum';

import LayoutMenu from '../menu-container/index.vue';
import { getGlobalCls } from '@/utils';

defineOptions({ name: 'LayoutSideBar' });

const appStore = useAppStore();

const { prefixCls } = getGlobalCls('container-sideBar');
const menuWidth = computed(() => appStore.getMenuSetting.menuWidth);

const isCollapsed = computed(() => appStore.getMenuSetting.collapsed);
const getRealWidth = computed(() => {
  return unref(isCollapsed) ? SIDE_BAR_MINI_WIDTH : unref(menuWidth);
});
const getMenuStyle = computed(() => {
  return {
    flex: `0 0 ${getRealWidth.value}px`,
    width: `${getRealWidth.value}px`
  };
});
</script>
<style lang="scss">
  $prefix-cls: #{config.$namespace}-container-sideBar;

.#{$prefix-cls} {
  height: 100%;
  background-color: var(--menu-background-color);
}
</style>
